<template>
  <div class="login-container">
    <div class="login-form">
      <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form">
        <van-cell-group>
          <van-field
            v-model="form.username"
            label="账号："
            placeholder="请输入账号"
            clearable
            name="username"
            :rules="usernameRules"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="form.password"
            label="密码："
            placeholder="请输入密码"
            name="password"
            clearable
            type="password"
            :rules="passwordRules"
          />
        </van-cell-group>
        <van-cell-group>
          <van-button block round type="primary" native-type="submit">登录</van-button>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { login, getUser } from '../api';
import useToken from '../stores/token';
import useUser from '../stores/user';

const { updateToken } = useToken();
const { updateUser } = useUser();
const router = useRouter();

const form = reactive({
  username: '',
  password: ''
});

const ruleFormRef = ref();

// 定义验证规则
const usernameRules = [
  { required: true, message: '用户名不能为空' },
  { pattern: /^\w{3,16}$/, message: '用户名长度为 3-16 个字符' }
];

const passwordRules = [
  { required: true, message: '密码不能为空' },
  { pattern: /^\w{6,24}$/, message: '密码必须为 6-24 位英文字母或数字' }
];

// 表单提交函数
const submitForm = async values => {
  try {
    const data = await login(values);
    if (data) {
      updateToken(data.token);
      const user = await getUser();
      updateUser({
        isLogin: true,
        username: user.username,
        avatar: user.avatar
      });
      router.push({ name: 'user' });
    }
  } catch (error) {
    console.error('登录失败', error);
  }
};

const onFailed = errorInfo => {
  console.log('验证失败', errorInfo);
};
</script>
<style lang="less" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 85vh;
  width: 100vw;
  background-size: cover; /* 使背景图片覆盖整个容器 */
  background-position: center; /* 使背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.login-form {
  width: 100%;
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景色 */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1;
}

.van-cell-group {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent; /* 使输入框背景透明 */
}

.van-field {
  border-bottom: 1px solid #e0e0e0;
  padding: 15px;
  font-size: 16px;

  &:last-child {
    border-bottom: none;
  }

  .van-field__label {
    width: 60px;
    color: #333;
  }

  .van-field__control {
    color: #333;
  }
}

.van-button {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  border-radius: 24px;
  background-color: #07c160;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #06b758;
  }
}
</style>